<template>
  <div class="report">
    <top-bar title="业绩报告"></top-bar>
    <div v-if="type == 1 && info" class="card-list">
      <div class="card" v-if="info.Yjyq">
        <div class="card-title">
          <p>{{ info.Yjyq["Hotel Name"] }}</p>
        </div>
        <div class="card-body">
          <div class="card-body-item">
            <p class="card-label">
              {{ info.Yjyq["Hotel Code"] }}
            </p>
          </div>
        </div>
      </div>
      <div class="card" v-if="info.Yjyq">
        <div class="card-title">
          <p>业绩要求</p>
        </div>
        <div class="card-body">
          <div class="card-body-item">
            <p class="card-label">Definite Leads</p>
            <p class="card-value">{{ info.Yjyq["# Definite Leads"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Total Leads</p>
            <p class="card-value">{{ info.Yjyq["# Total Leads"] }}</p>
          </div>
        </div>
      </div>
      <div class="card" v-if="info.jdxx">
        <div class="card-title">
          <p>业绩报告</p>
        </div>
        <div class="card-body">
          <div class="card-body-item" @click="goDetail('', 'Definite')">
            <p class="card-label">Definite Leads</p>
            <p class="card-value">{{ info.jdxx["# Definite Leads"] }}</p>
          </div>
          <div class="card-body-item" @click="goDetail('', 'Total')">
            <p class="card-label">Total Leads</p>
            <p class="card-value">{{ info.jdxx["# Total Leads"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Conversion %</p>
            <p class="card-value">
              {{ info.jdxx["Conversion %"] | percentage }}
            </p>
          </div>
        </div>
      </div>
      <div class="leads-btn-wrapper">
        <div class="leads-btn" @click="goSearchLeads">Leads状态查询</div>
      </div>
      <p class="tips">业绩要求是本年度1月份到当前时间的总业绩要求</p>
    </div>
    <div v-if="type == 2 && (info ? info.length == 1 : info)" class="sum-card">
      <div class="title-bar">
        <div class="legend"></div>
        <div class="info">
          <p>该区域所有酒店的参与度</p>
          <p>Hotel participation %</p>
        </div>
      </div>
      <div class="echart-wrapper">
        <p class="echart-name">
          {{ info[0]["Sub-Region"] }}
          {{ info[0]["Hotel participation %"] | percentage }}
        </p>
        <div class="echart" ref="chart"></div>
      </div>
      <div class="info-item">
        <p class="label">Sub-region</p>
        <p class="value">{{ info[0]["Sub-Region"] }}</p>
      </div>
      <div class="info-item">
        <p class="label">Hotels With 1 Leads Sent</p>
        <p class="value">{{ info[0]["Hotels With 1 Leads Sent"] }}</p>
      </div>
      <div class="info-item">
        <p class="label">Total hotels</p>
        <p class="value">{{ info[0]["# Total hotels"] }}</p>
      </div>
      <div class="info-item">
        <p class="label">Definite Leads</p>
        <p class="value">{{ info[0]["# Definite Leads"] }}</p>
      </div>
      <div class="info-item">
        <p class="label">Total Leads</p>
        <p class="value">{{ info[0]["# Total Leads"] }}</p>
      </div>
      <div class="info-item">
        <p class="label">Leads Conv.</p>
        <p class="value">{{ info[0]["Leads Conversion"] | percentage }}</p>
      </div>
      <div class="info-item">
        <p class="label">Definite Revenue (USD)</p>
        <p class="value">{{ info[0]["Definite Revenue (USD)"] | getEnUs }}</p>
      </div>
      <div class="info-item">
        <p class="label">Total Revenue (USD)</p>
        <p class="value">{{ info[0]["Total Revenue (USD)"] | getEnUs }}</p>
      </div>
      <div class="info-item">
        <p class="label">Conv.</p>
        <p class="value">{{ info[0]["Conversion"] | percentage }}</p>
      </div>

      <div
        class="btn-item"
        @click="goList('Sender Hotel', info[0]['Sub-Region'])"
      >
        <p>查看该区域所有Sender Hotel</p>
        <img src="@/assets/icon_10.png" alt="" class="icon" />
      </div>
      <div
        class="btn-item"
        @click="goList('Receiving Hotel', info[0]['Sub-Region'])"
      >
        <p>查看该区域所有Receiving Hotel</p>
        <img src="@/assets/icon_10.png" alt="" class="icon" />
      </div>
      <div class="btn-item" @click="goList('Top Seller', '')">
        <p>查看Top Seller</p>
        <img src="@/assets/icon_10.png" alt="" class="icon" />
      </div>
    </div>
    <div v-if="type == 2 && (info ? info.length > 1 : info)">
      <div class="sum-card">
        <div class="title-bar">
          <div class="legend"></div>
          <div class="info">
            <p>该区域所有酒店的参与度</p>
            <p>Hotel participation %</p>
          </div>
        </div>
        <div class="echart-wrapper">
          <p class="echart-name">
            {{ info[0]["Sub-Region"] }}
            {{ info[0]["Hotel participation %"] | percentage }}
          </p>
          <div class="echart" ref="chart"></div>
        </div>
        <div class="info-item">
          <p class="label">Sub-region</p>
          <p class="value">{{ info[0]["Sub-Region"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Hotels With 1 Leads Sent</p>
          <p class="value">{{ info[0]["Hotels With 1 Leads Sent"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total hotels</p>
          <p class="value">{{ info[0]["# Total hotels"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Definite Leads</p>
          <p class="value">{{ info[0]["# Definite Leads"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total Leads</p>
          <p class="value">{{ info[0]["# Total Leads"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Leads Conv.</p>
          <p class="value">{{ info[0]["Leads Conversion"] | percentage }}</p>
        </div>
        <div class="info-item">
          <p class="label">Definite Revenue (USD)</p>
          <p class="value">{{ info[0]["Definite Revenue (USD)"] | getEnUs }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total Revenue (USD)</p>
          <p class="value">{{ info[0]["Total Revenue (USD)"] | getEnUs }}</p>
        </div>
        <div class="info-item">
          <p class="label">Conv.</p>
          <p class="value">{{ info[0]["Conversion"] | percentage }}</p>
        </div>
      </div>
      <div v-for="item in subInfo" :key="item.id" class="all-card">
        <div class="card-title-text">
          <p>{{ item["Sub-Region"] }}</p>
          <p>{{ item["Hotel participation %"] | percentage }}</p>
        </div>
        <div class="info-item">
          <p class="label">Sub-region</p>
          <p class="value">{{ item["Sub-Region"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Hotels With 1 Leads Sent</p>
          <p class="value">{{ item["Hotels With 1 Leads Sent"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total hotels</p>
          <p class="value">{{ item["# Total hotels"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Definite Leads</p>
          <p class="value">{{ item["# Definite Leads"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total Leads</p>
          <p class="value">{{ item["# Total Leads"] }}</p>
        </div>
        <div class="info-item">
          <p class="label">Leads Conv.</p>
          <p class="value">{{ item["Leads Conversion"] | percentage }}</p>
        </div>
        <div class="info-item">
          <p class="label">Definite Revenue (USD)</p>
          <p class="value">{{ item["Definite Revenue (USD)"] | getEnUs }}</p>
        </div>
        <div class="info-item">
          <p class="label">Total Revenue (USD)</p>
          <p class="value">{{ item["Total Revenue (USD)"] | getEnUs }}</p>
        </div>
        <div class="info-item">
          <p class="label">Conv.</p>
          <p class="value">{{ item["Conversion"] | percentage }}</p>
        </div>

        <div
          v-if="isButton(item['Sub-Region'])"
          class="btn-item"
          @click="goList('Sender Hotel', item['Sub-Region'])"
        >
          <p>查看该区域所有Sender Hotel</p>
          <img src="@/assets/icon_10.png" alt="" class="icon" />
        </div>
        <div
          v-if="isButton(item['Sub-Region'])"
          class="btn-item"
          @click="goList('Receiving Hotel', item['Sub-Region'])"
        >
          <p>查看该区域所有Receiving Hotel</p>
          <img src="@/assets/icon_10.png" alt="" class="icon" />
        </div>
      </div>
      <div class="top-btn-wrapper" @click="goList('Top Seller', '')">
        <div class="top-btn">查看Top Seller</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import TopBar from "@/components/topBar.vue";
export default {
  name: "report",
  data() {
    return {
      type: 0,
      myChart: null,
      info: null,
      subInfo: [],
    };
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem("_userInfo_"));
    this.type = userInfo.type;
    // this.initEchart();
    this.getInfo();
  },
  methods: {
    isButton(name) {
      let arr = [
        "East China",
        "South China",
        "West China",
        "North China",
        "Franchise Full Service",
        "HIEX",
      ];
      let index = arr.findIndex((item) => item == name);
      if (index == -1) {
        return false;
      }
      return true;
    },
    getInfo() {
      if (this.type == 1) {
        this.$api.yjbg().then((res) => {
          if (res.status_code == 200) {
            this.info = res.data;
            // this.$nextTick(() => {
            //   this.initEchart();
            // });
          }
        });
      } else if (this.type == 2) {
        this.$api.type2yjbg().then((res) => {
          if (res.status_code == 200) {
            this.info = res.data;
            if (this.info.length > 1) {
              let totalIndex = res.data.findIndex((item) => {
                return item["Sub-Region"] == "Grand Total";
              });
              if (totalIndex == 0 || totalIndex) {
                let delArr = this.info.splice(totalIndex, 1);
                this.subInfo.push(...this.info);
                this.info.unshift(...delArr);
              } else {
                this.subInfo.push(...this.info);
              }
            }
            this.$nextTick(() => {
              this.initEchart();
            });
          }
        });
      }
    },
    goDetail(code, type) {
      this.$router.push({
        path: "/reportDesc",
        query: {
          code,
          type,
        },
      });
    },
    goSearchLeads(){
      this.$router.push({
        path: "/searchLeads",
      });
    },
    initEchart() {
      let echartData = Math.floor(this.info[0]["Hotel participation %"] * 100);
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.myChart
        ? this.myChart
        : echarts.init(this.$refs["chart"], "macarons");
      // 绘制图表
      let option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "66%",
            data: [
              {
                value: 100 - echartData,
                name: "",
                itemStyle: {
                  color: "#457F86",
                },
              },
              {
                value: echartData,
                name: this.info[0]["Sub-Region"],
                itemStyle: {
                  color: "#224448",
                },
              },
            ],
            label: {
              formatter: "{b} {d}%",
              overflow: "break",
              distanceToLabelLine: -5,
              show: false,
            },
            labelLine: {
              show: false,
              length2: 0,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    goList(type, region) {
      this.$router.push({
        path: "/reportList",
        query: {
          type,
          region,
        },
      });
    },
  },
  components: {
    TopBar,
  },
  filters: {
    percentage(num) {
      if (!(num * 1)) {
        return "0%";
      }
      let data = Math.floor(num * 100);
      return data + "%";
    },
    getEnUs(val) {
      return ((val * 1).toFixed(2) * 1).toLocaleString("en-US");
    },
  },
};
</script>

<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
  .report {
    height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
    height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
  }
}
.report {
  height: calc(100vh - 50px);
  background-color: #f4f4f4;
  position: relative;
  overflow-y: auto;
  .card-list {
    .card {
      margin-top: 10px;
      background-color: #fff;
      .card-title {
        background: #224448;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        p {
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
        }
      }

      .card-body {
        padding: 18px 16px;
        word-break: break-all;
        display: flex;
        .card-body-item {
          flex: 1;
          text-align: center;
          .card-label {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
          }

          .card-value {
            font-size: 25px;
            font-weight: 800;
            color: #3899a4;
            margin-top: 16px;
          }
        }
      }
    }
    .tips {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 30px;
      background: rgba(0, 0, 0, 0.2);
      font-size: 12px;
      color: #224448;
    }
  }
  .sum-card,
  .all-card {
    margin-top: 10px;
    background-color: #fff;
    padding: 0 15px;
    .title-bar {
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f4f4f4;
      .legend {
        width: 35px;
        height: 35px;
        background: #224448;
        margin-right: 20px;
      }

      .info {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        line-height: 20px;
        p {
        }
      }
    }
    .echart-wrapper {
      position: relative;
      .echart-name {
        position: absolute;
        z-index: 2;
        font-size: 14px;
        color: #224448;
        top: 30px;
      }
      .echart {
        height: 264px;
      }
    }

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      padding-bottom: 10px;
      .label {
      }

      .value {
        color: #224448;
      }
    }

    .btn-item {
      border-top: 1px solid #f4f4f4;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }

      .icon {
        width: 6px;
        height: 11px;
      }
    }
  }
  .all-card {
    padding: 0;
    .card-title-text {
      height: 40px;
      padding: 0 15px;
      background: #224448;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 15px;
    }
    .info-item {
      padding: 0 15px;
    }
    .btn-item {
      padding: 0 15px;
    }
  }
  .top-btn-wrapper {
    height: 200px;
    background-color: #fff;
    margin-top: 10px;
    padding-top: 30px;
    .top-btn {
      margin: 0 15px;
      height: 55px;
      background: #224448;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      line-height: 55px;
    }
  }
  .leads-btn-wrapper {
    margin-top: 10px;
    padding-top: 30px;
    .leads-btn {
      margin: 0 15px;
      height: 55px;
      background: #224448;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      line-height: 55px;
    }
  }
}
</style>